import { ref } from 'vue';
import DataModelAdd from './components/DataModelAdd/index.vue';
import DataModelList from './components/DataModelList/index.vue';
import { MciButton, MciDialog } from '@/components/base';

export default defineComponent({
  emits: ['selection'],
  setup(props, context) {
    const showAdd = ref(false);
    const title = ref('新增普通数据集');
    let rowData: any = null;
    const activeStep = ref(0);

    const handleEdit = (row?: any) => {
      showAdd.value = true;
      rowData = row;
      if (rowData && rowData.id) {
        title.value = '修改普通数据集';
      } else {
        title.value = '新增普通数据集';
      }
    };

    const init = () => {
      activeStep.value = 0;
      if (dataModelAddRef.value) {
        dataModelAddRef.value && dataModelAddRef.value?.initData(rowData);
      }
    };

    const lastStep = () => {
      dataModelAddRef.value && dataModelAddRef.value?.last();
    };

    const nextStep = () => {
      dataModelAddRef.value && dataModelAddRef.value?.next();
    };

    const handleClosed = (refresh?: boolean) => {
      showAdd.value = false;
      refresh && dataModelListRef.value && dataModelListRef.value?.tableRequest();
    };

    const handleConfirm = () => {
      dataModelAddRef.value && dataModelAddRef.value?.handleConfirm();
    };
    const dataModelListRef = ref();
    const dataModelAddRef = ref();
    // 刷新
    const refreshList = () => {
      dataModelListRef.value && dataModelListRef.value?.tableRequest();
    };
    context.expose({ handleEdit, refreshList });

    return () => {
      return (
        <div>
          <DataModelList
            onEdit={handleEdit}
            ref={dataModelListRef}
            onSelection={(selection) => (context.emit('selection', selection))}
          />
          {/* <DataModelAdd ref={dataModelAddRef} onClosed={handleClosed} /> */}
          {showAdd.value && (
            <>
              <MciDialog
                title={title.value}
                v-model={showAdd.value}
                width={1000}
                draggable={true}
                customClass="max-height-dialog">
                {{
                  default() {
                    return (
                      <DataModelAdd
                        ref={dataModelAddRef}
                        onInit={init}
                        onActiveStep={(step) => (activeStep.value = step)}
                        onClosed={(refresh) => handleClosed(refresh)}
                      />
                    );
                  },
                  footer() {
                    return (
                      <>
                        <MciButton onClick={() => (showAdd.value = false)}>取消</MciButton>
                        {activeStep.value > 0 && <MciButton onClick={lastStep}> 上一步 </MciButton>}
                        {activeStep.value === 0 && <MciButton onClick={nextStep}> 下一步 </MciButton>}
                        <MciButton type="primary" onClick={handleConfirm}>
                          确定
                        </MciButton>
                      </>
                    );
                  }
                }}
              </MciDialog>
            </>
          )}
        </div>
      );
    };
  }
});
